import React from 'react';
import PropTypes from 'prop-types';
import Tbody from './Tbody';
import './Table.css';

function Table(props) {
  const { columns, dataSource, caption, fiexdHead, fiexdFirst } = props;

  return (
    <div className={fiexdHead ? 'table-responsive section-scroll' : ''}>
      <table
        className={`table ${fiexdFirst ? 'firstList' : ''}  ${
          fiexdHead ? 'theadFiexd' : ' '
        }`}
      >
        {caption && <caption>{caption}</caption>}
        <thead class={`table-header`}>
          <tr>
            {columns?.map((v) => {
              return <th className="table-th-css">{v['title']}</th>;
            })}
          </tr>
        </thead>
        <Tbody dataSource={dataSource} list={columns} />
      </table>
    </div>
  );
}

// 类型检查
Table.propTypes = {
  columns: PropTypes.array.isRequired,
  dataSource: PropTypes.array.isRequired,
  caption: PropTypes.string,
  className: PropTypes.oneOfType([PropTypes.string]),
};

// 入参默认值
Table.defaultProps = {
  columns: [],
  dataSource: [],
  fiexdHead: false,
  fiexdFirst: false,
};

export default Table;
